<template>
  <div class="app-container" >
    <!--main search body-->
    <div>
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
          <el-form-item label="商品编号">
            <el-input
              v-model="queryParams.skuId"
              placeholder="请输入商品编号"
              clearable
              size="small"
            />
          </el-form-item>

          <el-form-item label="商品分类">
            <el-select
              v-model="queryParams.skuType"
              placeholder="商品分类"
              clearable
              size="small"
            >
              <el-option
                v-for="dict in prdsCollention"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="商品展位编码"  label-width="128px">
            <el-select v-model="queryParams.skuCode" placeholder="请选择">
              <el-option
                v-for="item in [1,2,3,4,5,6]"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="商品状态">
           <el-select
              v-model="queryParams.skuState"
              placeholder="商品分类"
              clearable
              size="small"
            >
              <el-option
                v-for="dict in statusCode"
                :key="dict.code"
                :label="dict.name"
                :value="dict.code"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <!--main search button -->
        <div class="search-button">
            <el-button type="primary" icon="el-icon-search" size="mini"  @click="mainSearch">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="mainEmpty">重置</el-button>
        </div>

      </div>

      <div class="add-options">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="navigateToAddPrds"  v-hasPermi="['system:user:add']">新增</el-button>
      </div>
      <!-- main list body -->
      <el-table v-loading="bannerLoding" :data="bannerList" >
          <el-table-column label="商品编号" align="center" prop="skuId"  width="120"/>
          <el-table-column label="商品图片" align="center" prop="skuImage">
            <template slot-scope="scope">
              <span v-if="!scope.row.img"></span>
              <el-image
                v-else
                style="width: 100px; height: 100px"
                :src="scope.row.img[0]"
                :preview-src-list="scope.row.img"
                />
            </template>
          </el-table-column>

          <el-table-column label="商品展位编码" align="center" prop="skuCode" :show-overflow-tooltip="true"  width="120"/>
          <el-table-column label="商品标题" align="center" prop="skuName" :show-overflow-tooltip="true" />
          <el-table-column label="商品分类" align="center" prop="skuType" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              {{transFromSkuType(scope.row.skuType)}}
            </template>
          </el-table-column>
          <el-table-column label="商品原价" align="center" prop="skuPrice" width="120" />
          <el-table-column label="返佣金额" align="center"  prop="skuCommission" :show-overflow-tooltip="true"/>
          <el-table-column label="商品状态" align="center" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.skuState?"已上架":'已下架'}}</span>
            </template>
          </el-table-column>


          <el-table-column label="京东商品状态" align="center" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.skuJdState?"已上架":'已下架'}}</span>
            </template>
          </el-table-column>



          <el-table-column
            label="操作"
            align="center"
            width="180"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-dropdown @command="e=>handleCommand(e,scope)">
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-if="!scope.row.skuState && scope.row.skuJdState" command="up">上架</el-dropdown-item>
                  <el-dropdown-item v-if="scope.row.skuState && scope.row.skuJdState" command="down">下架</el-dropdown-item>
                  <el-dropdown-item v-if="!scope.row.skuState  ||  !scope.row.skuJdState" command="del">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
      </el-table>

      <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.rows"
          @pagination="getList"
      />

      <!-- add prds dailog -->
      <el-dialog  title="新增商品" :visible.sync="addDailog" width="900px" append-to-body>
          <div class="">
            <!-- prds search -->
            <div>
              <el-input placeholder="请输入内容" v-model="dialogSearchParms.content">
                  <template slot="prepend">
                    <el-select
                       v-model="dialogSearchParms.type"
                       class="add-prds-select"
                       placeholder="请选择">
                        <el-option
                          v-for="item in dialogPrdsTypes"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code">
                        </el-option>
                      </el-select>
                  </template>
                </el-input>
                <!-- prds search button -->
                <div class="search-button">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="confrimDailogSearch">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini"  @click="clearDailogSearch">重置</el-button>
                </div>

              </div>

            <!-- prds list body -->
            <el-table row-key="skuId"  ref="dialogTable"  v-loading="dialogLoading" :data="dialogList" @selection-change="dialogHandleSelectionChange">
              <el-table-column type="selection" width="55" :reserve-selection='true'> </el-table-column>
                <el-table-column label="商品编号" align="center" prop="skuId" />
               <el-table-column label="商品标题" align="center" prop="skuName" :show-overflow-tooltip="true" />
                <el-table-column label="商品分类" align="center" prop="categoryInfo.cid1Name" :show-overflow-tooltip="true" />
                <el-table-column label="原价" align="center" prop="priceInfo.price" width="120" />
                <el-table-column label="返利" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.commissionInfo.couponCommission?scope.row.commissionInfo.couponCommission:scope.row.commissionInfo.commission}}</span>
                  </template>
                </el-table-column>
            </el-table>

            <pagination
                v-show="totalCount>0"
                :total="totalCount"
                :page.sync="dialogSearchParms.pageIndex"
                :limit.sync="dialogSearchParms.pageSize"
                @pagination="confrimDailogSearch"
            />
          </div>


        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dailogAdd">确 定</el-button>
          <el-button @click="cancelAdd">取 消</el-button>
        </div>
      </el-dialog>

    <!-- 商品展位 -->
    <el-dialog :visible.sync="codeDialog" title="商品展位编码"  width="600px" append-to-body>
      <el-select v-model="codeNumber" placeholder="请选择">
        <el-option
          v-for="item in [1,2,3,4,5,6]"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmCode">确 定</el-button>
        <el-button @click='cancleCode'>取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { listUser } from "@/api/system/user";
import {
  searchPrds,
  postPrdsList,
  getBannerList,
  updateBanner,
  deleteBanner
  } from "@/api/mall/index";
import { getToken } from "@/utils/auth";

export default {
  name: "Mall",
  components: {

  },
  data() {
    return {
      bannerList:[], //banner 列表
      bannerLoding:false,
      queryParams:{
         page:1,
         rows:10
      },
      //商品分类字典
      prdsClassification:[
        "生活用品",
        "食品",
        "其他"
      ],
      //状态字典
      statusCode:[
        {
          name:"已上架",
          code:1
        },
        {
          name:"已下架",
          code:0
        },
      ],

      codeNumber:1,
      //新增banner
      totalCount:0, //搜索的返回数量
      addDailog:false, //添加弹出框
      dialogPrdsTypes:[
        {name:"商品编号",code:"number"},
        {name:"商品标题",code:"title"},
      ],  //搜索类型
      dialogSearchParms:{
        type:"number",
        content:"",
        pageIndex:1,
        pageSize:10,
      }, //搜索参数
      dialogList:[],
      dialogLoading:false,
      dailogSelected:[],


      // 遮罩层
      loading: true,

      prdsList:[],

      total:0,

      codeDialog:false,
      skuId:"",
      prdsCollention:[]
    };
  },
  watch: {

  },
  created() {
    this.getList();
    //获取分类字典
    this.getPrdsCollention()
  },
  methods: {
    /**
     * id
     */
    transFromSkuType(id){
        const data = this.prdsCollention.find(v=>v.dictValue==id);
        console.log("data",data);
        return data?data.dictLabel :"-"
    },

    getPrdsCollention(){
      this.getDicts("jd_shop_category").then(response => {
          this.prdsCollention = response.data;
      });
    },


    mainSearch(){
      this.getList()
    },
    mainEmpty(){
      this.queryParams={
         page:1,
         rows:10
      }
    },
    /**
     * 确定上架
     */
    confirmCode(){
      // skuCode
      const codeNumber = this.codeNumber;
      const params = {
        skuId:this.skuId,
        skuCode:codeNumber,
        skuState:1
      }
      updateBanner(params).then(res=>{
         this.$message(res.msg);
         this.getList()
         this.codeDialog = false
      }).catch(err=>{
          this.$message(err);
          this.codeDialog = false
      })
    },
    /**
     * 取消上架
     */
    cancleCode(){
      this.codeDialog =false
    },
    /**
     * 上下架 删除
     * @param  {[type]} data rows;
     * @param e [up down del]
     */
    handleCommand(e,data){
      if(e=='del'){
        let  param =  new FormData();
        param.append("skuId", data.row.skuId)
        deleteBanner(param).then(res=>{
            this.$message(res.msg);
            //刷新
            this.getList()
        })
        return
      }
      //上架
      if(e=='up'){
        this.codeDialog = true
        this.skuId = data.row.skuId
        return
      }

      const params = {
        skuId:data.row.skuId,
        skuCode:data.row.skuCode,
        skuState:0,
      }
      updateBanner(params).then(res=>{
         this.$message(res.msg);
         this.getList()
      }).catch(err=>{

      })

      // updateBanner
    },
    /**
     * 弹款添加
     */
    dailogAdd(){
      const dailogSelected = this.dailogSelected;
      // 组织参数
      let list = [];
      dailogSelected.map(item=>{
          let imageList = []
          const jdImageList = item.imageInfo.imageList ||[]
          jdImageList.map(i=>{
            imageList.push(i.url)
          })
          // cid1Name
          let obj = {
            skuId:item.skuId,
            skuName:item.skuName,
            skuType:item.categoryInfo.cid1,
            skuPrice:item.priceInfo.price,
            skuCommission:item.commissionInfo.couponCommission?item.commissionInfo.couponCommission:item.commissionInfo.commission,
            skuImage:imageList.join(),
            skuState:0,
            skuJdState:1,
            skuCode:0
          }
          list.push(obj)
      })

      postPrdsList({bannerList:list}).then(res=>{
          this.$message(res.msg);
          this.getList()
          this.addDailog = false
      })
    },
    /**
     * dialog select
     * @return {[type]} [description]
     */
    dialogHandleSelectionChange(rows){
      this.dailogSelected = rows
    },
    /**
     * 清空dialog弹出serach
     */
    clearDailogSearch(){
      this.dialogSearchParms.content = ''
    },
    /**
     * dialog 搜
     * @return {[type]} [description]
     */
    confrimDailogSearch(){
      this.dialogLoading = true;
      const dialogSearchParms = this.dialogSearchParms;
      const type = dialogSearchParms.type;
      if(type=="number"){
        dialogSearchParms.skuId = dialogSearchParms.content;
        dialogSearchParms.keyWord = ""
      }else{
        dialogSearchParms.keyWord = dialogSearchParms.content;
        dialogSearchParms.skuId = ""
      }
      searchPrds(dialogSearchParms).then(res=>{
        this.dialogLoading = false;
        this.dialogList = res.data.queryResult.data
        this.totalCount = res.data.queryResult.totalCount
        const successText = res.data.queryResult.message=="success"?"获取商品成功" : res.data.queryResult.message
        this.$message(successText);
      })
    },
    cancelAdd(){
      this.addDailog = false
    },
    /**
     * 新增商品，弹框操作
    */
   navigateToAddPrds(){
     this.addDailog = true;
     this.$refs.dialogTable.clearSelection();
   },
    /** 查询用户列表 */
    getList() {
      this.bannerLoding = true;
      getBannerList(this.queryParams).then(response => {
          this.bannerLoding = false;
          if(response.code==200){
            this.$message({message:`查询数据${response.data.total}条`,type: 'success'});
            let bannerList = response.data.bannerList;
            //图片处理成list
            bannerList.map(item=>{
              item.img = item.skuImage?item.skuImage.split(","): []
            })
            this.bannerList = bannerList
            this.total = response.data.total
          }else{
            this.$message("数据获取失败");
          }


        }
      );
    },

  }
};
</script>

<style scoped>
  .search-button{
    display:flex;
    justify-content: center;
    margin-bottom: 10px;
  }
  .add-options{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    margin-right: 10px;
  }
  /* .el-input input{border:none;} */
  .add-prds-select{
    width: 120px
  }
  .search-button{
    display:flex;
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .add-options{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    margin-right: 10px;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
</style>
